<template>
  <div class="text-[0.8rem]">
    <el-descriptions :column="2" border>
      <template #extra>
        <el-button
          type="danger"
          v-if="detailForm.status == 2"
          @click="abandonBtn(detailForm.id)"
        >
          <el-icon> <CloseBold /> </el-icon>废弃
        </el-button>

        <el-button type="primary" @click="logBtn(detailForm.id)">
          <el-icon> <Message /> </el-icon>日志
        </el-button>
      </template>
      <el-descriptions-item label="销售单号" width="25%">
        {{ detailForm.orderCode }}
      </el-descriptions-item>
      <el-descriptions-item label="操作时间" width="25%">
        {{ detailForm.updatedAt ? $initTime(detailForm.updatedAt, 1) : "" }}
      </el-descriptions-item>
      <el-descriptions-item label="客户名称" width="25%">
        {{ detailForm.customerName }}
        <span
          v-if="
            detailForm.customerName != '访客' && detailForm.customerName != ''
          "
        >
          :{{ detailForm.customerTel }}
        </span>
      </el-descriptions-item>
      <el-descriptions-item label="售出数量" width="25%">
        {{ detailForm.quantity }}
      </el-descriptions-item>
      <el-descriptions-item label="业务员" width="25%">
        {{ detailForm.businessUserName }}
      </el-descriptions-item>
      <el-descriptions-item label="销售时间" width="25%">
        {{ $initTime(+detailForm.businessTime, 2) }}
      </el-descriptions-item>
      <el-descriptions-item label="标准总价(元)" width="25%">
        {{
          detailForm.totalAmount ? (detailForm.totalAmount / 100).toFixed(2) : 0
        }}
      </el-descriptions-item>
      <el-descriptions-item label="分项优惠总额(元)" width="25%">
        {{
          detailForm.subTotalDiscount
            ? (detailForm.subTotalDiscount / 100).toFixed(2)
            : 0
        }}
      </el-descriptions-item>
      <el-descriptions-item label="直减总额(元)" width="25%">
        {{
          detailForm.totalDiscount
            ? (detailForm.totalDiscount / 100).toFixed(2)
            : 0
        }}
      </el-descriptions-item>
      <el-descriptions-item label="应收金额(元)" width="25%">
        {{
          detailForm.paidAmount ? (detailForm.paidAmount / 100).toFixed(2) : 0
        }}
      </el-descriptions-item>
      <el-descriptions-item label="实收金额(元)" width="25%">
        {{
          detailForm.actualAmount
            ? (detailForm.actualAmount / 100).toFixed(2)
            : 0
        }}
      </el-descriptions-item>
      <el-descriptions-item label="备注" width="25%">
        {{ detailForm.remark }}
      </el-descriptions-item>
    </el-descriptions>

    <el-divider class="my-[1.5rem]">商品清单</el-divider>

    <el-table :data="tableData">
      <el-table-column prop="goodsCode" label="商品编码" align="center" fixed />
      <el-table-column
        prop="goodsTitle"
        label="商品名称"
        align="center"
        fixed
        show-overflow-tooltip
      />
      <el-table-column
        prop="goodsSpecName"
        label="商品规格"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column prop="priceAtOrder" label="零售单价(元)" align="center">
        <template #default="{ row }">
          {{ row.priceAtOrder ? (row.priceAtOrder / 100).toFixed(2) : 0 }}
        </template>
      </el-table-column>
      <el-table-column prop="count" label="售出数量" align="center" />
      <el-table-column prop="priceAtOrder" label="分项价(元)" align="center">
        <template #default="{ row }">
          {{
            new Decimal(row.priceAtOrder).mul(new Decimal(row.count))
              ? new Decimal(row.priceAtOrder)
                  .mul(new Decimal(row.count))
                  .div(100)
                  .toNumber()
                  .toFixed(2)
              : 0
          }}
        </template>
      </el-table-column>
      <el-table-column prop="priceAtOrder" label="分项优惠(元)" align="center">
        <template #default="{ row }">
          {{ row.subItemDiscount ? (row.subItemDiscount / 100).toFixed(2) : 0 }}
        </template>
      </el-table-column>
      <el-table-column prop="amount" label="分项应收(元)" align="center">
        <template #default="{ row }">{{
          row.amount ? (row.amount / 100).toFixed(2) : 0
        }}</template>
      </el-table-column>
      <el-table-column label="眼别" align="center">
        <template #default="{ row }">
          <el-tag
            :type="
              row.eyeType == 2
                ? 'primary'
                : row.eyeType == 3
                ? 'success'
                : 'info'
            "
          >
            {{ row.eyeType == 1 ? "左眼" : row.eyeType == 2 ? "右眼" : "综合" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="returnQuantity" label="退货数量" align="center" />
      <el-table-column
        prop="amount"
        label="操作"
        align="center"
        v-if="props.typeId == 0"
        width="180"
        fixed="right"
      >
        <template #default="{ row }">
          <div class="flex justify-center items-center">
            <el-dropdown
              trigger="click"
              class="flex justify-center items-center mr-2 hover:cursor-pointer"
              v-if="row.returnQuantity < row.count"
            >
              <el-button type="warning" link>
                <span>申请售后</span>
                <el-icon><ArrowDown /></el-icon>
              </el-button>

              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="handleRefundAndReturn(row, 1)">
                    <img
                      src="https://file.supore.cn/1742371672refund.png"
                      alt=""
                      class="w-[20px] h-[20px]"
                    />
                    <el-text type="primary" class="ml-2">仅退款</el-text>
                  </el-dropdown-item>
                  <el-dropdown-item @click="handleRefundAndReturn(row, 2)">
                    <img
                      src="https://file.supore.cn/1742371694refund__return.png"
                      alt=""
                      class="w-[20px] h-[20px]"
                    />
                    <el-text type="primary" class="ml-2">退货退款</el-text>
                  </el-dropdown-item>
                  <el-dropdown-item @click="handleRefundAndReturn(row, 3)">
                    <img
                      src="https://file.supore.cn/1742371705return.png"
                      alt=""
                      class="w-[20px] h-[20px]"
                    />
                    <el-text type="primary" class="ml-2">换货</el-text>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>

            <el-button
              type="primary"
              link
              v-if="row.hasReturnOrder"
              @click="refundDetailBtn(detailForm.id)"
            >
              <el-icon> <InfoFilled /> </el-icon>售后详情
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 1.日志 -->
    <el-drawer v-model="log_drawer" destroy-on-close size="40%" title="日志">
      <LogPage :logId="props.detailId" />
    </el-drawer>

    <!-- 2.申请售后 -->
    <el-drawer
      v-model="refundAndRetur_drawer"
      destroy-on-close
      size="60%"
      title="申请售后"
    >
      <!-- 1.仅退款 -->
      <ReturnPage
        :productForm="productForm"
        :detailForm="detailForm"
        v-if="refundAndRetur_drawer && return_type == 1"
        @handleBack="handleBack"
      />

      <!-- 2.退货退款 -->
      <RefundAndReturnPage
        :productForm="productForm"
        :detailForm="detailForm"
        v-if="refundAndRetur_drawer && return_type == 2"
        @handleBack="handleBack"
      />

      <!-- 3.换货 -->
      <exchangeGoodsPage
        :productForm="productForm"
        :detailForm="detailForm"
        v-if="refundAndRetur_drawer && return_type == 3"
        @handleBack="handleBack"
      />
    </el-drawer>

    <!-- 3.售后详情 -->
    <el-drawer
      v-model="sale_drawer"
      destroy-on-close
      title="售后详情"
      size="75%"
    >
      <ReturnList :detailId="props.detailId" />
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import Decimal from "decimal.js";
import LogPage from "./LogPage.vue";
import ReturnPage from "./sale/refund.vue"; // 仅退款
import RefundAndReturnPage from "./sale/refund_and_return.vue"; // 退货退款
import exchangeGoodsPage from "./sale/exchange_goods.vue";
import ReturnList from "../../ReturnList/index.vue";
import { handleApiResponse } from "@/utils/request.js";
import { GetOrderDetail } from "../../../../../wailsjs/go/api/GoodsApi.js";
import { DeleteOrderById } from "../../../../../wailsjs/go/api/OrderApi.js";

onMounted(() => {
  getDetail();
});

const props = defineProps({
  detailId: {
    type: Number,
    default: 0,
  },
  typeId: {
    type: Number,
    default: 0,
  },
});

const detailForm = ref({});
const tableData = ref([]);
async function getDetail() {
  handleApiResponse(() => GetOrderDetail(props.detailId)).then((res) => {
    if (res.code == 0) {
      // console.log(res);

      detailForm.value = res.data || {};
      tableData.value = res.data.items || [];
    }
  });
}

// 1.废弃
const abandonBtn = (id) => {
  ElMessageBox.confirm("你确定要废弃此条数据吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    handleApiResponse(() => DeleteOrderById({ id })).then((res) => {
      if (res.code == 0) {
        ElMessage.success("废弃成功");
        getDetail();
      }
    });
  });
};

// 2.日志
const log_drawer = ref(false);
const logId = ref(null);
const logBtn = (id) => {
  logId.value = id;
  log_drawer.value = true;
};

// 3.退货退款
const refundAndRetur_drawer = ref(false);

const productForm = ref({}); // 退货商品
const return_type = ref(null); // 退货类型 1.仅退款 2.退货退款 3.换货
const handleRefundAndReturn = (row, type) => {
  console.log(row);

  productForm.value = row;
  return_type.value = type;
  refundAndRetur_drawer.value = true;
};

const handleBack = (val) => {
  refundAndRetur_drawer.value = false;
  if (val == 1) getDetail();
};

// 4.售后详情
const sale_drawer = ref(false);
const refundDetailBtn = () => {
  sale_drawer.value = true;
};
</script>

<style scoped lang="scss">
</style>